import { Component } from 'react';
import { connect } from 'dva';
import { Card, Tag, Button, Space, Table, Modal, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

import styles from '../global.less';

class Dva extends Component<any>{ 
    
    pageChange = (page: any, pageSize: any) => {
        this.props.dispatch({
            type: 'dva/pageChange',
            payload: {
                limit: pageSize,
                page
            }
        })
    }

    deployHandle = (record: any) => {
        confirm({
            title: 'Are you sure you want to protect this person?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                message.success('Deploy troops for defence succeeded!');
            },
            onCancel() { },
        });
    }


    render() {
        const columns = [{
            title: 'Name',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: 'IDcard',
            dataIndex: 'IDcard',
            key: 'IDcard'
        }, {
            title: 'House',
            dataIndex: 'house',
            key: 'house'
        }, {
            title: 'Identity',
            key: 'identity',
            dataIndex: 'identity',
            render: (text: any) => {
                let color
                switch (text) {
                    case 'Owner': color = 'success';
                        break;
                    case 'Visitor': color = 'error';
                        break;
                    case 'Renter': color = 'warning';
                        break;
                    case 'Property': color = 'default';
                        break;
                }
                return (
                    <Tag color={color}>{text}</Tag>
                );
            }
        }, {
            title: 'Action',
            key: 'action',
            render: (text: any, record: any) => {
                if (record.identity == 'Visitor') {
                    return (
                        <Space>
                            <Button type="link">编辑</Button>
                            <Button type="text" onClick={() => this.deployHandle(record)}>布防</Button>
                        </Space>
                    )
                } else if (record.identity == 'Property') {
                    return (
                        <Space>
                            <Button type="link">编辑</Button>
                            <Button type="link" danger>删除</Button>
                        </Space>
                    )
                } else {
                    return (<Button type="link">编辑</Button>)
                }
            }
        }]
        let { list, total, page, limit, loading, } = this.props
        const pagination = {
            pageSize: limit,
            total: total,
            current: page,
            showSizeChanger: true,
            pageSizeOptions: ['5', '10', '15'],
            onChange: (page: any, pageSize: any) => {
                this.pageChange(page, pageSize)
            }
        }
        return (
            <>
                <Card>
                    <Table dataSource={list} columns={columns} loading={loading} pagination={pagination} />
                </Card>
                <div className={styles.descriptionBlock}>
                    <p>Tips：</p>
                    <p>1. Dva specific usage：models & services folder</p>
                    <p>2. Table's attribute:columns (handle and render single data) & pagination (function of currentPage or pageSize change)</p>
                    <p>3. Usage of 'connect' & 'mapstatetoprops'</p>
                </div>
            </>
        )
    }
}

function mapStateToProps(state: any) {
    return {
        ...state.dva
    };
}

export default connect(mapStateToProps)(Dva);